<template>
  <div class="patent">
    <search :searchKey.sync="searchKey" 
        enterButton="搜索专利"
        placeholder="输入你感兴趣的专利名或关键字"
        @search="search"/>
    <div class="patent-header">
      <div class="header-center animated fadeIn">
        <div class="right-foot"><Icon type="md-pulse" size="18" /> 专利相关单位分布</div>
        <h2 class="header-title">- 专利相关数据可视化 -</h2>
        <Carousel v-model="value1" arrow="never">
          <CarouselItem v-for="(item,index) in 2" :key="index">
              <div class="demo-carousel">
                <div class="title"><Icon type="md-medal" size="20" /> &nbsp;高频发明人</div>
                <div class="fmr-list" v-for="(fmr,j) in gpfmr.slice(index*5,(index+1)*5)" :key="fmr.fa_ming_ren">
                  <div><img src="../assets/login.png" alt="" width="60px"> </div>
                  <div>
                    <div>{{fmr.fa_ming_ren}}</div>
                    <div>共发明{{fmr._count_id}}件</div>
                  </div>
                  <div class="range-index">{{j+5*index+1}}</div>
                </div>
              </div>
          </CarouselItem>
      </Carousel>
      <p-chart-sqr chartId="sqr" />
      </div>
    </div>

    <div class="item-list">
      <div class="recommendation">
        <div class="title">
          <Icon type="md-apps" size="30" color="#999"></Icon>
          <h3 style="margin-left:10px">
            全部专利
            <span style="color:#888;font-weight:normal;font-size:15px;margin-left:20px" v-if="title"> > {{title}}</span>
            <!-- <Select v-model="year" style="width:120px;margin-left:20px" placeholder="筛选年份" @on-change="changeYear">
                <Option v-for="item in year_data" :value="item" :key="item">{{ item }}</Option>
            </Select> -->
            <Select v-model="type" style="width:120px;margin-left:20px" placeholder="筛选论文类型" @on-change="changeType">
                <Option v-for="item in type_data" :value="item.name" :key="item.name">{{ item.name }}</Option>
            </Select>
          </h3>
        </div>
        <Divider style="margin-top:15px;" />
        
        <!-- 骨架屏 -->
        <el-skeleton animated :loading="loading" class="patent-container">
            <template slot="template">
              <div class="patent-list" v-for="(item,index) in 5" :key="index">
                <div class="list-left"><el-skeleton-item variant="text" style="width:40px;height:40px;border-radius:100%;margin-right:10px"  /></div>
                <div class="list-right" style="width:100%">
                  <el-skeleton-item variant="text" style="width:60%;height:20px;"  />
                  <el-skeleton-item variant="text" style="width:60%;height:30px;"  />
                  <el-skeleton-item variant="text" style="width:100%;height:100px;"  />
                  <el-skeleton-item variant="text" style="width:20%;height:30px;margin-right:5px"  />
                  <el-skeleton-item variant="text" style="width:20%;height:30px;margin-right:5px"  />
                  <el-skeleton-item variant="text" style="width:20%;height:30px;"  />
                  <Divider/>
                </div>
              </div>
            </template>
        </el-skeleton>

        <!-- 暂无结果 -->
        <div v-if="!totalPages&&!loading" style="text-align:center;margin-bottom:50px" class="animated fadeInUp">
            <img src="../assets/noresult.svg" alt="" width="200px" height="175px">
            <br>
            <span style="margin-right:0;margin-top:20px;font-size:18px">暂时没有结果，换一些关键词试试吧~</span>
        </div>

        <div class="patent-container" v-if="!loading">
          <div class="patent-list" v-for="item in pageInfo" :key="item.id">
            <div class="list-left"><img src="../../public/images/logo.png" alt="" width="50px"></div>
            <div class="list-right">
              <span v-html="highlightHTML(item.title,searchKey)"></span>
              <span class="highmark">{{item.patenType}}</span>
              <div>{{item.abstract}}</div>
              <div>
                <span v-for="keywords in item.keywords.split(/[,，;；]/)" :key="keywords">
                  <Button class="tag-btn" v-if="keywords">{{keywords}}</Button>
                </span>
              </div>
              <div class="list-info">
                <span><Icon type="md-time" size="18" /> 
                公开日：
                {{new Date(item.patenDate).getFullYear()+'-'+  parseInt(new Date(item.patenDate).getMonth()  + 1 ) + '-' +  new Date(item.patenDate).getDate()}}
                </span>
                <span style="color:orange"><Icon type=" ivu-icon-ios-home" size="18" /> 申请人（单位）：{{item.applicant}}</span>
              </div>
              <Divider/>
            </div>
          </div>

          <Page v-if="totalPages" :total="totalPages" class="pages" :current="pageNumber" :page-size="5" @on-change="getPageInfo" style="background:white" />
        </div>
      </div>
      <div class="patent-keyword">
        <div class="title" style="margin-top:10px">
          <Icon type="md-apps" size="30" color="#999"></Icon><h3 style="color:#666;margin-left:10px">专利热点关键词及类型分布</h3>
        </div>
        <Divider style="margin-top:15px;width:200px !important" />

        <!-- 骨架屏 -->
        <el-skeleton animated :loading="tag_loading">
            <template slot="template">
                <div v-for="(item,index) in 8" :key="index">
                  <el-skeleton-item variant="text" style="width:40%;height:30px;margin-left:5px;margin-top:10px"/>
                  <el-skeleton-item variant="text" style="width:20%;height:30px;margin-left:5px;"/>
                  <el-skeleton-item variant="text" style="width:30%;height:30px;margin-left:5px;margin-top:10px"/>
                  <el-skeleton-item variant="text" style="width:10%;height:30px;margin-left:5px"/>
                  <el-skeleton-item variant="text" style="width:40%;height:30px;margin-left:5px;margin-top:10px"/>
                  <el-skeleton-item variant="text" style="width:25%;height:30px;margin-left:5px"/>
                  <el-skeleton-item variant="text" style="width:15%;height:30px;margin-left:5px"/>
                </div>
            </template>
        </el-skeleton>

        <!-- <div v-if="!tag_loading">
          <Badge v-for="item in title_hot" :key="item.id" :text="item.text" >
            <Button class="tag-btn">{{item.title}}</Button>
          </Badge>
        </div> -->

        <div class="word-container" v-if="!tag_loading">
          <div class="title"><Icon type="md-medal" size="20" /> &nbsp;专利热门关键词词云</div>
          <wordcloud
            class="wordcloud"
            :data="defaultWords"
            nameKey="name"
            valueKey="value"
            spiral="rectangular"
            :color="myColors"
            fontScale="n"
            :drawOutOfBound="true"
            :fontSize="[20,30]"
            :showTooltip="false">
          </wordcloud>
        </div>
        <div  :style="!tag_loading?'visibility:visible':'visibility:hidden'">
          <div class="chart-container">
            <div class="chart1-title"><Icon type="md-medal" size="20" /> 专利类型分布情况</div>
            <div id="chart1" class="animated fadeIn"></div>
          </div>
          
          <div class="chart-container">
            <div class="chart2-title"><Icon type="md-medal" size="20" /> 专利类型分布情况</div>
            <div id="chart2" class="animated fadeIn"></div>
          </div>
        </div>
        <!-- <div class="sys-logo"><img src="../assets/sys-logo.png" alt=""></div> -->
      </div>
    </div>
  </div>
</template>
<script>
import wordcloud from 'vue-wordcloud'
import search from '../components/topSearch.vue'
import ZlService from '@/service/zhuan_li'
import utils from '../utils/utils'
import pChartsqr from '../components/chart/patent/sqr.vue'
import zhuanliSerive from '@/service/zhuan_li'

export default {
  components: {
    wordcloud,
    search,
    'p-chart-sqr':pChartsqr
  },
  data() {
    return {
      searchKey:'',
      value1:0,
      tag_loading:true,
      loading:true,
      title:'',
      myColors: ['#1f77b4', '#629fc9', '#94bedb', '#c9e0ef'],
      // myColors: ['#00fefb','#FFFFCC', '#CCFFFF', '#FF6666', '#CCCCFF','orange','tomato','#CCFF99','#CCCCFF','#66CCCC'],
      defaultWords: [{
          "name": "智慧教室",
          "value": 5
        },
        {
          "name": "教学设计",
          "value": 5
        },
        {
          "name": "教育信息化",
          "value": 5
        },
        {
          "name": "人工智能",
          "value": 5
        },
        {
          "name": "智慧课堂",
          "value": 2
        },
        {
          "name": "信息技术",
          "value": 1
        },
        {
          "name": "移动学习",
          "value": 7
        },
         {
          "name": "雷达",
          "value": 5
        },
         {
          "name": "课堂注意力",
          "value": 5
        },
        {
          "name": "多模态",
          "value": 9
        },
        {
          "name": "artificial inteligence",
          "value": 11
        },
        {
          "name": "人工智能",
          "value": 5
        },
         {
          "name": "AI",
          "value": 5
        },
        {
          "name": "电化教育",
          "value": 5
        },
        {
          "name": "教学模式",
          "value": 15
        },
        {
          "name": "课堂教学模型",
          "value": 10
        },
        {
          "name": "学习者模型",
          "value": 10
        },
        {
          "name": "电子讲台",
          "value": 10
        },
        {
          "name": "学习成绩预测",
          "value": 10
        },
        {
          "name": "学习反应",
          "value": 10
        },
        {
          "name": "学习系统",
          "value": 10
        },
        {
          "name": "考试桌",
          "value": 10
        },
        {
          "name": "数字化实验",
          "value": 10
        },
        {
          "name": "区块链",
          "value": 10
        },
      ],
      // search:'主题',
      searchList:['主题','关键词'],
      title_hot:[{
        title:'智慧课堂',
        text:'new'
      },{
        title:'电化教育',
        text:'new'
      },{
        title:'习题推荐',
        text:'hot'
      },{
        title:'课堂注意力',
        text:''
      },{
        title:'Cloud-based',
        text:''
      },{
        title:'行为分析'
      },{
        title:'教学效果评价'
      },{
        title:'智慧教室系统'
      },{
        title:'个性化课程'
      },{
        title:'智能教室排课'
      },{
        title:'学业监控'
      },{
        title:'learning norms'
      },{
        title:'constant exercises'
      },{
        title:'学习路线'
      },{
        title:'教育机器人'
      },{
        title:'知识掌握测量'
      },{
        title:'teachers tracking'
      },{
        title:'师资匹配'
      },{
        title:'学习状态'
      },{
        title:'在线学习质量评测'
      },{
        title:'考试领域'
      },{
        title:'在线教学'
      },{
        title:'学生角色生成'
      }],
      keyword_hot:[{
        title:'智慧课堂'
      }],
      swiperOption:{
        direction: "vertical",
        speed: 500,
        autoplay: true,
        loop:true,
      },
      pageInfo:[],
      totalPages:0,
      pageNumber:1,
      gpfmr:[],
      year_data:[],
      type_data:[],
      type:'',
      year:'',
    }
  },  
  computed:{
    filter_paramas(){
      let arr = [];
      if(this.searchKey){
        arr.push(["title",6,this.searchKey])
      }
      if(this.year!='全部年份'&&this.year){
        arr.push(["YEAR(patenDate)",0,this.year])
      }
      if(this.type!='全部专利类型'&&this.type){
        arr.push(["patenType",0,this.type])
      }
      return arr;
    }
  },
  mounted(){
    this.$route.params.searchKey&&(this.searchKey=this.$route.params.searchKey)&&(this.title=this.$route.params.searchKey);

    this.$Loading.finish();
    let chart1 = echarts.init(document.querySelector('#chart1'));
    var option1 = {
    backgroundColor: '#fff',
    grid: {
        top: "15%",
        bottom: "15%",//也可设置left和right设置距离来控制图表的大小
        left:'10%',
        right:'5%',
    },
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
            label: {
                show: true
            }
        }
    },
    legend: {
        data: [ "发表专利总数"],
        top: "5%",
        textStyle: {
            color: "#888"
        }
    },
    xAxis: {
        data: [
            "2000",
            "2002",
            "2004",
            "2006",
            "2008",
            "2012",
            "2016",
            "2020",
        ],
        axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#888'
            }
        },
        axisTick: {
            show: true //隐藏X轴刻度
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#888" //X轴文字颜色
            }
        },
         
    },
    yAxis: [{
            type: "value",
            name: "×1000 件",
            nameTextStyle: {
                color: "#888"
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: true
            },
            axisLine: {
                show: true,
                lineStyle: {
                  color: '#888'
                  }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#888"
                }
            },
             
        },
        {
            type: "value",
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                }
            }
        }
    ],
    series: [
        {
            name: "发表专利总数",
            type: "bar",
            barWidth: 20,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "orange"
                        },
                        {
                            offset: 1,
                            color: "orange"
                        }
                    ])
                }
            },
            data: [2, 3, 4.5, 8,12, 15, 20, 25.5]
        }
    ]
    };
    chart1.setOption(option1);

    window.onresize = ()=>{
      chart1.resize()
    }

    this.getData();
    this.getGpfmr();
    this.loadKeyword();

    //初始化年份数据及排名统计
    zhuanliSerive.getPatentKeywordTrend({
      type:'PATENT',
      topN:10
    }).then(res=>{
      this.year_data = res.data.weightList.map(item=>{
        return item.key;
      });
      this.year_data.unshift('全部年份');
    })

    //初始化专利类型图表
    zhuanliSerive.getPatentList({
      columns:['patenType','count:id'],
      group:['patenType'],
      order:[['count:id',1]]
    }).then(res=>{
      this.type_data = res.data.map(item=>{
        return{
          name:item.patenType,
          value:item._count_id
        }
      });
      this.initTypeChart();
      this.type_data.unshift({
        name:'全部专利类型',
        value:0
      })
    })
  },
  methods:{
    getData(){
      document.querySelector('.right-foot').scrollIntoView(true);
      this.loading = true;
      ZlService.getPatentList({
          filter:this.filter_paramas,
          pageSize:5,
          pageNumber:this.pageNumber,
          order:[["patenDate",1]]
        }).then((res) => {
          console.log(res)
        this.loading = false;
        this.tag_loading = false;
        this.pageInfo = res.data;
        this.totalPages = res.total;
      })
    },
    //分页函数
    getPageInfo(currentIndex){
        this.pageNumber = currentIndex;
        this.getData();
    },
    highlightHTML(html,search_key){
      return utils.highlightHTML(html,search_key)
    },
    search(){
      this.title = this.searchKey;
      this.getData();
    },
    loadKeyword(){
      /*获取专利关键词词频统计及排名*/
      let option = {
          type: 'PATENT',
          topN: 50,
      };
      zhuanliSerive.getZlKeywordList(option).then(res=>{
        this.defaultWords = res.data.map(item=>{
          return {
            name:item[0],
            value:item[1]
          }
        })
      })
    },
    //高频带领人
    getGpfmr(){
      zhuanliSerive.getZlList({
          columns:['fa_ming_ren','count:id'],
          group:['fa_ming_ren'],
          order:[['count:id',1]],
          filter:[['fa_ming_ren',11]],
          pageSize:10
      }).then(res=>{
        this.gpfmr = res.data;
      })
    },
    initTypeChart(){
          let chart2 = echarts.init(document.querySelector('#chart2'));
          var colorList = ['#FF8700', '#ffc300', '#00e473', '#009DFF','#FF8700', '#ffc300', '#00e473', '#009DFF'];
          var option2 = {
              backgroundColor: '#fff',
              tooltip: {
                  trigger: 'item',
                  formatter: "{b}: {c}件 ({d}%)"
              },
              legend: {
                  left:'center',
                  bottom:10,
                  textStyle:{
                      color:'#666'
                  },
                  x: 'right',
                  data:['发明申请','发明授权','实用新型','检索报告','外观设计','其他']
              },

              series: [
                  {   
                      type:'pie',
                      radius: ['10%', '35%'],
                      center:['50%','47%'],
                      roseType: 'radius',
                      clockwise :false,
                      z:10,
                      itemStyle: {
                          normal: {
                              color: function(params) {
                                  // build a color map as your need.
                                  return colorList[params.dataIndex]
                              },
                          }
                      },
                      label: {
                          normal: {
                              formatter: function(params){
                                  // return '{b|'+params.name+'}\n'+params.value+'度({per|'+params.percent+'%})  '
                                  var str = ''
                                  switch(params.name){
                                      case '发明申请':str = '{a|'+params.name+'}\n\n{pera|'+params.value+'件 ('+params.percent+'%)}';break;
                                      case '发明授权':str = '{b|'+params.name+'}\n\n{perb|'+params.value+'件 ('+params.percent+'%)}';break;
                                      case '检索报告':str = '{c|'+params.name+'}\n\n{perc|'+params.value+'件 ('+params.percent+'%)}';break;
                                      case '实用新型':str = '{d|'+params.name+'}\n\n{perd|'+params.value+'件 ('+params.percent+'%)}';break;
                                      case '外观设计':str = '{d|'+params.name+'}\n\n{perd|'+params.value+'件 ('+params.percent+'%)}';break;
                                      case '其他':str = '{d|'+params.name+'}\n\n{perd|'+params.value+'件 ('+params.percent+'%)}';break;
                                  }
                                  return str
                              },
                              rich: {
                                  a: {
                                      color: '#666',
                                      padding: [2, 10],
                                      lineHeight: 10,
                                      fontSize: 14,
                                      height: 30,
                                      fontWeight:1000,
                                      borderRadius: 15
                                  },
                                  b: {
                                      color: '#666',
                                      padding: [2, 10],
                                      lineHeight: 10,
                                      fontSize: 14,
                                      height: 30,
                                      fontWeight:1000,
                                      borderRadius: 15
                                  },
                                  c: {
                                      color: '#666',
                                      padding: [2, 20],
                                      lineHeight: 10,
                                      fontSize: 14,
                                      height: 30,
                                      fontWeight:1000,
                                      borderRadius: 15
                                  },
                                  d: {
                                      color: '#666',
                                      padding: [2, 20],
                                      lineHeight: 10,
                                      fontSize: 14,
                                      height: 30,
                                      fontWeight:1000,
                                      borderRadius: 15
                                  },
                                  pera: {
                                      color: '#666',
                                      padding: [2, 5],
                                      lineHeight: 0,
                                      fontSize: 12,
                                      height: 30,
                                      borderRadius: 15
                                  },
                                  perb: {
                                      color: '#666',
                                      lineHeight: 0,
                                      fontSize: 12,
                                      height: 30,
                                      padding:[2,5],
                                      borderRadius: 15
                                  },
                                  perc: {
                                      color: '#666',
                                      lineHeight: 0,
                                      fontSize: 12,
                                      height: 30,
                                      padding:[2,5],
                                      borderRadius: 15
                                  },
                                  perd: {
                                      color: '#666',
                                      lineHeight: 0,
                                      fontSize: 12,
                                      height: 30,
                                      padding:[2,5],
                                      borderRadius: 15
                                  }
                              }
                          }
                      },
                      labelLine: {
                          normal: {
                              length: 15,
                              length2: 15,
                              lineStyle:{
                                  width:2
                              }
                          }
                      },
                      data:this.type_data
                  },
                  // 边框的设置
                  {
                      center:['50%','47%'],
                      radius: ['10%', '14%'],
                      type: 'pie',
                      clockwise :false,
                      z:11,
                      label: {
                          normal: {
                              show: false
                          },
                          emphasis: {
                              show: false
                          }
                      },
                      labelLine: {
                          normal: {
                              show: false
                          },
                          emphasis: {
                              show: false
                          }
                      },
                      animation: false,
                      tooltip: {
                          show: false
                      },
                      itemStyle: {
                          normal: {
                              color: function(params) {
                                  // build a color map as your need.
                                  var colorList = ['#aaa', '#aaa', '#aaa', '#aaa'];
                                  return colorList[params.dataIndex]
                              }
                          }
                      },
                      data:[
                          {value:300, name:'发明申请'},
                          {value:351, name:'发明授权'},
                          {value:300, name:'检索报告'},
                          {value:200, name:'实用新型'},
                          {value:200, name:'外观设计'},
                          {value:200, name:'其他'},
                      ]
                  },
                  // 中心的圆圈
                  {
                      center:['50%','47%'],
                      radius: ['55%', '60.3%'],
                      type: 'pie',
                      label: {
                          normal: {
                              show: false
                          },
                          emphasis: {
                              show: false
                          }
                      },
                      labelLine: {
                          normal: {
                              show: false
                          },
                          emphasis: {
                              show: false
                          }
                      },
                      tooltip: {
                          show: false
                      },
                      data: [{
                          value: 100,
                          name: '民警训练总量',
                          itemStyle: {
                              normal: {
                                  color: '#5A96FF',
                              }
                          }
                      }],
                      animation: false
                  }
              ]
          };
          chart2.setOption(option2);
          window.onresize = ()=>{
            chart2.resize()
          }
    },
    changeYear(){
      this.pageNumber = 1;
      this.getData();
    },
    changeType(){
      this.pageNumber = 1;
      this.getData();
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .ivu-select-placeholder,
/deep/ .ivu-select-item,
/deep/ .ivu-select-selected-value{
    font-weight: normal;
}
//专利数据可视化
.patent-header{
  position: relative;
  width: 100%;
  padding-top: 100px;
  padding-bottom: 50px; 
  z-index: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background: rgb(250, 250, 250); 
  /deep/ .ivu-carousel{
    height: 520px;
    width: 30%;
    border-radius: 10px;
    flex-shrink: 0;
    margin-bottom: 15px;
    .demo-carousel{
      margin: 30px;
      overflow: hidden;
      .title{
        background: var(--single-color);
        color: white;
        font-weight: bold;
        padding: 15px 22px;
        font-size: 18px;
        text-align: left;
        border-top-left-radius: 5px;
      }
    }
    // border:1px solid #eee;
  }
  .header-center{
    position: relative;
    border-radius: 5px;
    background: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: 1px 1.732px 60px 0px rgba(0, 0, 0, 0.1);
    margin-top: -150px;
    width: 90%;
    height: 520px;
    background-size: 100% 100%;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    z-index: 99;
    .right-foot{
      position: absolute;
      right: 0;
      bottom: 0;
      padding: 15px 22px;
      background: var(--single-color);
      color: white;
      font-weight: bold;
      border-top-left-radius: 10px;
      border-bottom: 3px solid #eee;
      border-right: 3px solid #eee;
      box-shadow: 0 0 10px 0px #b6b6b6;
      z-index: 999;
    }
    .header-title{
      background: var(--single-color);
      box-shadow: 0 0 10px 0px #1b1b1b96;
      position: absolute;
      color: white;
      margin-top: 20px;
      font-weight: normal;
      font-size: 16px;
      margin: auto;
      padding: 12px 20px;
      border-radius: 5px;
      font-weight: bold;
      top: 0;
      z-index: 12;
      border-bottom: 5px solid #eee;
      text-align: center;
      display: inline-block;
      left: 50%;
      transform: translateX(-50%)  translateY(-35px);
    }
    .swiper-container{
      overflow: hidden;
      width: 90%;
      margin-left: 5%;
      margin-top: 12px;
      border-radius: 3px;
      height: 55px;
      line-height: 55px;
      background: var(--single-color);
      border:2px solid #eee;
    }
    .fmr-list{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      color:#888;
      margin-top: 10px;
      padding: 0px 15px;
      .range-index{
        width: 10%;
        text-align: center;
        background: url(../assets/range-bg.png) no-repeat;
        background-size: 30px 30px;
        background-position: 50% 50%;
        height: 40px;
        line-height: 45px;
        color: #fff;
        font-weight: bold;
        font-size: 14px;

      }
      >div:nth-of-type(2){
        text-align: left;
        width: 50%;
      }
    }
    .swiper-slide{
      padding: 0px 25px;
      // background: var(--single-color);
    }
    .center-title{
      color: white;
      margin-top: 20px;
    }
    .chart-center{
      width: 65%;
      height: 400px;
      // background: rgba(255, 255, 255, 0.226);
      border-radius: 3px;
    }
  }
}
.chart-container{
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    margin-top: 20px;
    border-radius: 5px;
    overflow: hidden;
    .chart2-title,.chart1-title{
        background: var(--single-color);
        color: white;
        font-weight: bold;
        padding: 15px 22px;
        font-size: 16px;
        text-align: left;
    }
}
#chart1,#chart2{
  // background: white;
  min-height: 300px;
  width: 400px;
  z-index: 0;
  align-self: center;
  overflow: hidden;
}
#chart2{
  min-height: 350px;
  z-index:0;
}
.word-container{
  position: relative;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
  // background: linear-gradient(-150deg,#24695f,#495a86);
  // background-image: url(../assets/bg.jpg);
  // background-size: 100% 100%;
  min-width: 45%;
  margin-top: 50px;
  z-index: 1;
  border-radius: 5px;
  overflow: hidden;
  .title{
    background: var(--single-color);
    color: white;
    font-weight: bold;
    padding: 15px 22px;
    font-size: 18px;
    text-align: left;
  } 
}
.wordcloud{
  background-size: 100% 100%;
  /dee/ .chart{
    width: 100%;
  }
  /deep/ text{
    cursor: pointer !important;
    transition: text-shadow 0.2s ease;
  }
  /deep/ text:hover{
    font-size: 20px;
    text-shadow: 0 1px 1px rgba(59, 59, 59, 0.767);
  }
}

//专利列表
.item-list{
  display: flex;
  width: 90%;
  margin-left: 5%;
  margin-top: 20px;
  .recommendation{
    width: 70%;
    flex-shrink: 0;
    padding-right: 50px;
    text-align: left;
    .title{
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 16px;
      margin-top: 10px;
      color:#666;
    }
    .patent-list{
      display: flex;
      flex-direction: row;
      .list-info{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 98%;
        margin-top: 10px;
        margin-bottom: 15px;
        color: #999;
        span{
          vertical-align: middle;
        }
      }
    }
    .list-left{
      margin-top: 8px;
    }
    .highmark{
        display: inline-block;
        font-size: 12px;
        font-weight: normal;
        border: 1px solid rgba(219, 219, 219, 0.5);
        color: white;
        font-weight: 500;
        background: var(--single-color);
        padding: 4px 10px;
        vertical-align: middle;
        border-radius: 3px;
        cursor: pointer;
        transform: translateY(-2px);
    }
    .highmark::after {
        content: '';
        display: inline-block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        // background: url(../assets/flash.gif) no-repeat center;
        background-size: contain;
        opacity: 0.6;
        top: 0;
    }
    .list-right>div{
      margin-top: 5px;
    }
    .list-right >span:nth-child(1){
      color: #4eadca;
      font-weight: bold;
      font-size: 20px;
      margin-right: 10px;
      vertical-align: middle;
    }
    .list-right >div:nth-child(3){
      color:#888;
      max-height: 200px;
      line-height: 2;
      text-overflow: ellipsis !important;
      overflow: hidden;
    }
    .tag-btn{
      padding: 5px;
      margin-right: 5px;
      font-size: 12px;
      margin-bottom: 10px;
    }
    .pages{
      text-align: center;
    }
    /deep/ .ivu-page-item,
    /deep/ .ivu-page-next,
    /deep/ .ivu-page-prev{
      margin-bottom: 10px;
    }
  }
  .patent-keyword{
    text-align: left;
    padding-right: 20px;
    .title{
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 16px;
    }
    .tag-btn{
      margin-left: 15px;
      max-width: 120px;
      text-overflow: ellipsis !important;
      overflow: hidden;
      margin-top: 5px;
      margin-bottom: 12px;
      font-size: 12px;
      padding: 7px;
      background: rgb(247, 247, 247);  
    }
    .sys-logo{
      background: rgb(252, 252, 252);
      text-align: center;
      padding: 20px;
      margin-top: 20px;
      border-radius: 5px;
      border:2px solid #eee;
      img{
        width: 80%;
      }
    }
  }
}

@media (max-width:1060px) {
  .patent-header{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .swiper-slide{
      width: 100%;
    }
  }
  .header-center{
    width: 100% !important;
    border: none !important;
    margin-top: 40px;
    margin-bottom: 20px;
    min-height: 250px;
    border-radius: 0px !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: 1000px !important;
    .chart-center{
      width: 100% !important;
      padding:0px 10px !important;
      padding-bottom: 30px !important;
    }
    /deep/ .ivu-carousel{
    height: 520px;
    margin-top: 30px;
    width: 100%;
    border-radius: 10px;
    flex-shrink: 0;
    margin-bottom: 15px;
    .demo-carousel{
      margin: 30px;
      overflow: hidden;
      .title{
        background: var(--single-color);
        color: white;
        font-weight: bold;
        padding: 15px 22px;
        font-size: 16px;
        text-align: left;
        border-top-left-radius: 5px;
      }
    }
    // border:1px solid #eee;
  }
  }
  #chart1,#chart2{
    width: 90%;
    transform: translateX(0);
    min-height: 250px;
  }
  #chart2{
    min-height: 350px;
  }

  //搜索内容
  .search{
    flex-direction: column;
    .search-select{
      margin-left: 10px;
    }
    .search-input{
      width: 80%;
    }
    .tag{
      margin-bottom:20px;
    }
    .tag-btn{
      margin-bottom: 10px;
    }
  }

  //专利内容
  .item-list{
    width: 94%;
    margin-left: 3%;
    .recommendation{
      width: 100%;
      flex-shrink: 1;
      padding-right: 0;
      .patent-list{
        .list-info{
          flex-direction: column;
          span{
            margin-bottom: 5px;
          }
        }
      }
    }
    .patent-keyword{
      display: none;
    }
  }
}
</style>
